<template>
    <div class="city">
        <header>
            <span @click="$router.go(-1)" class="close">×</span>
            选择城市
        </header>
        <mycity :allcities="allcities" :group="group" :hotcities="hotcities" :cities="cities"></mycity>
    </div>
</template>

<script>
import axios from 'axios';
import mycity from './components/mycity.vue';
export default {
    components: { mycity },
    data() {
        return {
            cities: [],
            hotcities: [],
            group: [
                "A",
                "B",
                "C",
                "D",
                "E",
                "F",
                "G",
                "H",
                "I",
                "J",
                "K",
                "L",
                "M",
                "N",
                "O",
                "P",
                "Q",
                "R",
                "S",
                "T",
                "U",
                "V",
                "W",
                "X",
                "Y",
                "Z",
            ],
            allcities: []
        }
    },
    methods: {
        async getCities() {
            const response = await axios.get('https://m.maizuo.com/gateway?k=4488677', {
                headers: {
                    'X-Host': 'mall.film-ticket.city.list'
                }
            });
            const res = await response.data
            const tmp_cities = res.data.cities
            this.allcities = tmp_cities

            this.cities = res.data.cities
            this.hotcities = res.data.cities.filter(city => city.isHot == 1)

            let tmp_result = tmp_cities.map(city => {
                return {
                    cityId: city.cityId,
                    name: city.name,
                    pinyin: city.pinyin,
                    keyword: city.pinyin.substr(0, 1).toUpperCase()
                }
            })
            // 创建一个城市分组的数组
            let tmp_group = this.group.map(item => {
                return {
                    keyword: item,
                    children: tmp_result.filter(city => city.keyword === item)
                }
            })
            // 最后将分组好的城市数据分组给cities
            this.cities = tmp_group
        }
    },
    created() {
        this.getCities()
    },
}
</script>

<style lang="less" scoped>
@import url(@/assets/Less/common.less);

.city {
    header {
        height: 50px;
        background-color: #fff;
        .flex();

        .close {
            .position(absolute, 10px, auto, 10px, auto);
            font-size: 30px;
        }
    }
}
</style>